<template>
    <div class="wh-100 p-8" >
        <div class="wh-100 overflow-auto" style="background-color: white">
            <div class="w-100   d-flex-between-center pl-16 pr-16 bor-base-b ch50">
               <div class="fs-14 fw-6">档案详情</div>
                <Button @click="$router.go(-1)" style="background-color: white">返回</Button>
            </div>

            <div class="w-100 h-85  pl-32">
                <div class="w-100 h-30  bor-base-b mt-8">
                    <Form class="formStyle " :model="rowData" :label-width="labelWidth">
                        <FormItem
                            label="学号" class="">
                            <Input class="formItem-input" v-model="rowData.xh" disabled="true" placeholder=""></Input>
                        </FormItem>
                        <FormItem
                            label="姓名" class="">
                            <Input class="formItem-input" v-model="rowData.name" disabled="true" placeholder=""></Input>
                        </FormItem>
                        <FormItem
                            label="所在院系" class="">
                            <Input class="formItem-input" v-model="rowData.yxmc" disabled="true" placeholder=""></Input>
                        </FormItem>
                        <FormItem
                            label="专业" class="">
                            <Input class="formItem-input" v-model="rowData.zy" disabled="true" placeholder=""></Input>
                        </FormItem>
                        <FormItem
                            label="班级" class="">
                            <Input class="formItem-input" v-model="rowData.szbj" disabled="true" placeholder=""></Input>
                        </FormItem>
                    </Form>
                </div>
                <div class="w-65   bor-base-b pb-12  " >
                    <Form  class="formStyle mt-8" ref="formRef"  :model="formItem" :rules="formRules" :label-width="labelWidth" >
                        <FormItem
                                  label="档案转递类型"
                                  :rules="[{ required: true, message: '该项必填', trigger: 'change'}]"
                                  prop="transferType">
                            <Select class="formItem-input" :disabled="isEdit" v-model="formItem.transferType" placeholder="请选择户籍类型">
                                <Option v-for="item in accountTypeList" :value="item.value">{{ item.title }}</Option>
                            </Select>
                        </FormItem>
                        <FormItem
                            prop="unitName"
                            :rules="[{ required: true, message: '该项必填', trigger: 'change'}]"
                            label="档案转递单位名称">
                            <Input class="formItem-input" :disabled="isEdit"  v-model="formItem.unitName" placeholder="请填写单位名称"></Input>
                        </FormItem>
                        <div class="d-flex ">
                            <FormItem
                                prop="unitLocation"
                                :rules="[{ required: true,  trigger: 'change',validator: validatelocationOfTheUnit}]"
                                class="" label="档案转递单位地址">
                                <el-cascader
                                    :disabled="isEdit"
                                    class="formItem-input"
                                    v-model="formItem.unitLocation"
                                    :options="locationOfTheUnitList"
                                    :props="provincesAndMunicipalitiesProps"
                                    @change="changeUnitLocation "
                                ></el-cascader>
                            </FormItem>
                            <div class=" pt-8 ml-12 cursor-pointer cfont12" @click="queryFileForwardingAddress" >查询档案转递地址</div>
                        </div>
                        <FormItem  class="">
                            <Input class="formItem-input" :disabled="isEdit"  v-model="formItem.unitAddress" placeholder="请填写档案转递单位详细地址"></Input>
                        </FormItem>
                        <FormItem
                            :rules="[{ required: true, message: '该项必填', trigger: 'blur'}]"
                            prop="unitZip"
                            label="档案转递单位邮编" class="">
                            <Input class="formItem-input" :disabled="isEdit"  v-model="formItem.unitZip" placeholder="请填写单位邮编号"></Input>
                        </FormItem>
                        <FormItem
                            :rules="[{ required: true, message: '该项必填', trigger: 'change'}]"
                            prop="unitContact"
                            label="档案转递联系人" class="">
                            <Input class="formItem-input" :disabled="isEdit"  v-model="formItem.unitContact" placeholder="请填写转递联系人"></Input>
                        </FormItem>
                        <FormItem
                            :rules="[{ required: true, message: '该项必填', trigger: 'change'}]"
                            prop="unitTel"
                            label="档案转递联系电话" class="">
                            <Input class="formItem-input"  :disabled="isEdit"  v-model="formItem.unitTel" placeholder="请填写转递联系电话或手机号码"></Input>
                        </FormItem>
                        <FormItem label="情况说明" class="">
                            <Input class="formItem-input-area" :disabled="isEdit"  v-model="formItem.unitRemark" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" placeholder="选填(200字以内)"></Input>
                        </FormItem>
<!--                        :rules="[{ required: true, trigger: 'blur' ,validator:validateEvidentiaryMaterial}]"-->

                        <FormItem
                            prop="imageMaterial"
                            label="上传证明材料" class="">
                                <uploadPicture  :images="backImages" @beforeUpload="beforeUpload" ref="supportingMaterialRef" :max-count="3"></uploadPicture>
                        </FormItem>
                    </Form>
                </div>
                <div v-if="isShowBtn" class="w-100 h-30 d-flex pt-24">
                    <div class="w-30 h-auto ">
                        <Form  :label-width="labelWidth2">
                            <FormItem label="审核意见" class="">
                                <Input class="formItem-input-area" v-model="comment" type="textarea" :rows="3"  placeholder="请输入审核意见"></Input>
                            </FormItem>
                            <FormItem label="消息通知" class="mt-8">
                                <CheckboxGroup v-model="send" >
                                    <Checkbox label="1">站内信通知</Checkbox>
<!--                                    <Checkbox label="2">短信通知</Checkbox>-->
                                </CheckboxGroup>
                            </FormItem>
                            <FormItem >
                                <Button v-loading="submitLoadings"  style="background-color: rgb(24, 144, 255);color: white" @click="submitRight">通过</Button>
                                <Button v-loading="backLoadings" style="background-color: rgb(255, 153, 0);color: white" @click="backRight">驳回</Button>
<!--                                <Poptip class="ml-8" trigger="hover"  placement="right">-->
<!--                                    <Icon type="ios-alert-outline" size="24" />-->
<!--                                    <div  slot="content">-->
<!--                                        档案审核页面的输入框支持老师编辑，老师点击通过的时候回存数据到学生的档案表-->
<!--                                    </div>-->
<!--                                </Poptip>-->
                            </FormItem>
                        </Form>

                    </div>
                    <!--                警告提示-->
                    <div  class="fs-12 ml-8 cw610">
                        <Alert show-icon>
                            <div >
                                通过：如果学生填写的档案信息与证明材料一致，内容填写完整，审核无误可通过。档案审核页面的输入框支持老师编辑，老师点击通过的时候回存数据到学生的档案表。

                            </div>
                            <div >
                                驳回：如果学生填写的档案信息与证明材料不一致，内容填写不完整，请填写驳回修改意见,驳回后，学生修改后可以再次提交。
                            </div>
                        </Alert>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import UploadPicture from '../../components/uploadPicture/uploadPicture.vue';
import { updateVal } from '../../util/ObjectUtil';
import { imageUploadDataApi, newProvincialDataApi } from '../../api/bys';
import { getDictDataByType } from '../../api';
import {
    archiveTransferPass,
    archiveTransferReject,
    getByLocationAPI, updateArchiveTransfer
} from '../../api/archivesManagement/archiveForwardingAddressApis';
const formRules = {};
export default {
    components: { UploadPicture },
    data(){
        const validateEvidentiaryMaterial= (rule, value, callback) => {
            if (this.$refs.supportingMaterialRef.formFile.length > 0 || this.formItem.imageMaterial !== null) {
                callback();
            } else {
                callback(new Error('请上传证明材料'));
            }
        };
        const validatelocationOfTheUnit = (rule, value, callback) => {
            if (this.formItem.unitLocation === null || this.formItem.unitLocation === '') {
                callback(new Error('请选择档案转递所在地'));
            } else {
                callback();
            }
        };
        return{
            labelWidth: 155,
            labelWidth2: 125,
            comment: "",
            sendMessage: false,
            send: [],
            isShowBtn: true,
            isEdit:false,
            backLoadings: false,
            submitLoadings: false,
            backImages:"",
            message: '通过：如果学生填写的档案信息与证明材料一直，内容填写完整，审核无误可通过。\n' +
                '驳回：如果学生填写的档案信息与证明材料不一致，内容填写不完整，请填写驳回修改意见，\n' +
                '驳回后，学生修改后可以再次提交。',
            rowData: {},
            formItem: {
                sfzh: "",
                imageMaterial: null,
                transferType: "",
                unitAddress: "",
                unitContact: "",
                unitLocation: "",
                unitName: "",
                unitRemark: "",
                unitTel: "",
                unitZip: "",
            },
            formRules,
            validateEvidentiaryMaterial,
            validatelocationOfTheUnit,
            locationOfTheUnitList: [], // 单位所在地
            // 省市区级联
            provincesAndMunicipalitiesProps: {
                label: 'name',
                value: 'code',
                children: 'children'
            },
            accountTypeList: [],
        }
    },
    methods:{
        changeUnitLocation(){
            this.$refs.formRef.validateField('unitLocation')
            let whereAddressName=[]
            let LocationCode=this.formItem.unitLocation
            for (let i = 0; i < this.locationOfTheUnitList.length; i++) {
                if (this.locationOfTheUnitList[i].code == LocationCode[0]) {
                    whereAddressName.push(this.locationOfTheUnitList[i].name)
                }
                if (this.locationOfTheUnitList[i].children) {
                    let children = this.locationOfTheUnitList[i].children
                    for (let j = 0; j < children.length; j++) {
                        if (children[j].code == LocationCode[1]) {
                            whereAddressName.push(children[j].name)
                        }
                        if (children[j].children) {
                            let children2 = children[j].children
                            for (let k = 0; k < children2.length; k++) {
                                if (children2[k].code == LocationCode[2]) {
                                    whereAddressName.push(children2[k].name)
                                }
                            }
                        }
                    }
                }
            }
            this.getByLocation(this.formItem.unitLocation[2],this.formItem.sfzh)
            this.formItem.unitLocationName=whereAddressName.toString()
        },
        getByLocation(locationCode,idCard){
            getByLocationAPI({locationCode:locationCode,idCard:idCard}).then((res) =>{
                console.log("res",res)
                let result = res.result[0]
                // 非师范
                if(result.isNormal == 0){
                    if(result.notNormalUnitName && result.notNormalUnitAddress.length>1){
                        let address={
                            unitName:result.notNormalUnitName || '',
                            unitAddress:result.notNormalUnitAddress || '',
                            unitZip:result.notNormalUnitZip || '',
                            unitContact:result.notNormalUnitContact || '',
                            unitTel:result.notNormalUnitTel || '',
                        }
                        this.$Modal.confirm({
                            title: '系统档案转递地址',
                            content: '检测到系统中当前填写的转递所在地有转递信息，是否使用系统信息覆盖当前填写信息？',
                            onOk: () => {
                                this.formItem.unitName=address.unitName
                                this.formItem.unitAddress=address.unitAddress
                                this.formItem.unitZip=address.unitZip
                                this.formItem.unitContact=address.unitContact
                                this.formItem.unitTel=address.unitTel
                            },
                            onCancel: () => {
                            }
                        } )
                        // this.replaceTheForwardingInformation(address)
                    }
                } else{
                    //   师范
                    if(result.normalUnitName && result.normalUnitAddress.length>1){
                        let address={
                            unitName:result.normalUnitName || '',
                            unitAddress:result.normalUnitAddress || '',
                            unitZip:result.normalUnitZip || '',
                            unitContact:result.normalUnitContact || '',
                            unitTel:result.normalUnitTel || '',
                        }
                        this.$Modal.confirm({
                            title: '系统档案转递地址',
                            content: '检测到系统中当前填写的转递所在地有转递信息，是否使用系统信息覆盖当前填写信息？',
                            onOk: () => {
                                this.formItem.unitName=address.unitName
                                this.formItem.unitAddress=address.unitAddress
                                this.formItem.unitZip=address.unitZip
                                this.formItem.unitContact=address.unitContact
                                this.formItem.unitTel=address.unitTel
                            },
                            onCancel: () => {

                            }
                        } )
                        // this.replaceTheForwardingInformation(address)
                    }
                }
            })
        },
        queryFileForwardingAddress(){
            const routeData = this.$router.resolve({ name: 'archiveForwardingAddress' });
            window.open(routeData.href, '_blank');
        },
        backRight(){
            this.backLoadings = true;
            if(this.send && this.send.length > 0){
                for(let i=0;i<this.send.length;i++){
                    if(this.send[i] == 1){
                        this.sendMessage = true;
                    }
                }
            }
            archiveTransferReject({id:this.rowData.id,comment:this.comment,sendMessage:this.sendMessage,procInstId:this.rowData.procInstId,applyUserId:this.rowData.applyerUserid}).then(res => {
                if(res.code === 200){
                    this.$message.success("审核驳回成功");
                    this.$router.go(-1)
                    this.backLoadings = false;
                }

            })

        },
        async submitRight() {
            this.$refs.formRef.validate(async (valid) => {

                if (valid) {
                    this.submitLoadings = true;
                    console.log("this.rowData", this.formItem);
                    if (this.send && this.send.length > 0) {
                        for (let i = 0; i < this.send.length; i++) {
                            if (this.send[i] == 1) {
                                this.sendMessage = true;
                            }
                        }
                    }

                    let zmcl = []
                    for (let i = 0; i < this.$refs.supportingMaterialRef.formFile.length; i++) {
                        let file = this.$refs.supportingMaterialRef.formFile[i];
                        if (file.type) {
                            // region TODO 上传证明材料
                            const formData = new FormData();
                            formData.append('file', file);
                            const uploadResponse = await imageUploadDataApi(formData);
                            if (uploadResponse.code == 200) {
                                this.$refs.supportingMaterialRef.formFile[i] = uploadResponse.result
                            }
                        }
                    }
                    zmcl = this.$refs.supportingMaterialRef.formFile
                    this.formItem.imageMaterial = zmcl


                    console.log("this.rowData", this.formItem);

                    let res1 = await updateArchiveTransfer(this.formItem)
                    if (res1) {
                        archiveTransferPass({
                            id: this.rowData.id,
                            comment: this.comment,
                            sendMessage: this.sendMessage,
                            procInstId: this.rowData.procInstId,
                            applyUserId: this.rowData.applyerUserid
                        }).then(res => {
                            if (res.code === 200) {
                                this.$message.success("审核通过成功");
                                this.submitLoadings = false;
                                this.$router.go(-1)
                            }
                        })
                    }
                }
            });



        },
        beforeUpload(){
            this.$refs.formRef.validateField('imageMaterial');
        },
        async newObtainTheCascadingDataOfProvincesAndCities(){
          console.log('获取地址');
            await newProvincialDataApi().then( res=>{
                this.locationOfTheUnitList = res.result;
                console.log("this.locationOfTheUnitList",this.locationOfTheUnitList)
            })
          console.log('hhhh');
        },
        obtainTheAccountMigrationType(){
            getDictDataByType('file-forwarding-type').then(res => {
                if(res.code === 200){
                    let datalist=[]
                    for(let item of res.result){
                        if(item.title !== '暂不确定'){
                            datalist.push(item)
                        }
                    }
                    this.accountTypeList=datalist
                }
            });
        },
        onRestWindow() {
            // this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth = this.searchLabelWidth(this.labelWidth)
        },

    },
    beforeDestroy() {
      window.removeEventListener('resize',this.onRestWindow)
    },
    async mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        if(this.$route.params.type){
            if(this.$route.params.type === '已审核'){
                this.isShowBtn = false;
                this.isEdit = true;
            }
        }
        await this.newObtainTheCascadingDataOfProvincesAndCities();
        await this.obtainTheAccountMigrationType();
        if(this.$route.params.row){
            this.rowData = this.$route.params.row;

            updateVal(this.formItem, this.rowData);
            this.formItem.sfzh = this.rowData.idCard;
            this.backImages = this.formItem.imageMaterial;
            let unitLocation = this.rowData.unitLocation
          this.formItem.unitLocation = []
          this.locationOfTheUnitList.map(item=>{
            item.children.map(e=>{
              e.children.map(_e=>{
                if (unitLocation == _e.code ){
                  this.formItem.unitLocation=[item.code,e.code,_e.code]
                }
              })
            })
          })
            // if(this.rowData.unitLocation.indexOf(",") != -1 ){
            //     let dwszd=this.rowData.unitLocation.split(',') || '';
            //   console.log(dwszd);
            //     this.formItem.unitLocation=dwszd
            //
            // }else{
            //     this.formItem.unitLocation=[]
            //     this.formItem.unitLocation.push(parseInt(this.rowData.unitLocation))
            // }

            console.log(this.rowData);
        }

    }
};
</script>
<style scoped lang="less">
//form表单间距统一修改
.ivu-form-item {
    margin-bottom: 0.01rem !important;
}

.formStyle{
    width:800px;
    .formItem-input{
        width: 300px;
    }
    .formItem-input-area{
        width: 360px;
    }
}

.ch50 {
    height: 50px
}
.cw610 {
    width: 610px
}
.cfont12 {
    color:rgb(40, 115, 243);font-size:12px;
}
.ch80 {
    height: 550px;
}
</style>